<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>服务网络</title>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<style type="text/css">
			.content .title-box {
				text-align: center;
				line-height: 2;
				margin-top: 70px;
			}
			
			.mapbox {
				position: relative;
			}
			
			.mapbox img {
				display: block;
				width: 100%;
			}
			
			.pt {
				position: absolute;
			}
			
			.pt img {
				display: block;
				cursor: pointer;
			}
			
			.pt .blue {
				display: none;
			}
			
			.pt1 {
				left: 33.66%;
				top: 31.94%;
			}
			
			.pt2 {
				left: 39.91%;
				top: 22.78%;
			}
			
			.pt3 {
				left: 35.92%;
				top: 57.36%;
			}
			
			.pt4 {
				left: 52.08%;
				top: 35.83%;
			}
			
			.pt5 {
				left: 53.5%;
				top: 50.83%;
			}
			
			.pt6 {
				left: 70.33%;
				top: 43.61%;
			}
			
			.pt7 {
				left: 73.66%;
				top: 62.5%;
			}
			
			.addressbox {
				position: absolute;
				left: -66px;
				top: 100%;
				width: 140px;
				height: 186px;
				background: url(images/service/ser04.png);
				background-size: 100% 100%;
				padding: 5px;
				z-index: 11;
				display: none;
			}
			
			.jj {
				width: 100%;
				display: block;
				margin-top: 10px;
			}
			
			.infobox {
				position: relative;
				overflow: hidden;
			}
			
			.infobox .posi {
				width: 14px;
				position: absolute;
				top: 14px;
			}
			
			.positext {
				text-indent: 18px;
				margin-top: 14px;
				color: #f9c24b;
				margin-bottom: 14px;
			}
		</style>
	</head>

	<body>
		<!--公共头部开始-->
		<div class="momask">
			<div class="outmask">

			</div>
			<div class="subnav">
				<ul class="monavul">
					<li class="monavli">
						<a href="index.html">首页</a>
					</li>
					<li class="monavli">
						<a href="solution.html">解决方案</a>
					</li>
					<li class="monavli">
						<a href="product.html">产品中心</a>
					</li>
					<li class="monavli">
						<a href="servicemap.html">服务支持</a>
					</li>
					<li class="monavli">
						<a href="news.html">新闻资讯</a>
					</li>
					<li class="monavli">
						<a href="introduce.html">关于我们</a>
					</li>
					<li class="monavli">
						<a href="callus.html">联系我们</a>
					</li>
				</ul>
				<div class="navfooter">
					<div class="language">
						<span class="cn">CN</span>&nbsp;&nbsp;/&nbsp;&nbsp;<span class="en">英文</span>
					</div>

					<img src="images/102.png" />
				</div>

			</div>
		</div>
		<!--pc 头部-->
		<header class="pcheader clearfix">
			<img class="bannerimg" src="images/service/banner.jpg" />
			<div class="navwarp clearfix">

				<div class="pcnavbox clearfix">
					<div class="navdivst"><span class="cn">CN</span><span>&nbsp;&nbsp;/&nbsp;&nbsp;</span><span class="en">英文</span>
					</div>
					<div class="navdivst">
						<a href="callus.html">联系我们</a>
					</div>
					<div class="navdivst">
						<a href="introduce.html">关于我们</a>
					</div>
					<div class="navdivst">
						<a href="news.html">新闻资讯</a>
					</div>
					<div class="navdivst">
						<a href="servicemap.html" style="color: #4695ec">服务支持</a>
					</div>
					<div class="navdivst">
						<a href="product.html">产品中心</a>
					</div>
					<div class="navdivst">
						<a href="solution.html">解决方案</a>
					</div>
					<div class="navdivst">
						<a href="index.html">首页</a>
					</div>

				</div>
				<div class="logobox">
					<img class="logo" src="images/index/logo.png" />
				</div>
			</div>
		</header>

		<!--手机头部-->
		<header class="moheader">
			<div class="monavbar clearfix">
				<a href="index.html"><img class="mologo" src="images/logo.png" /></a>
				<img class="menu-icon" src="images/menu.png" />
			</div>
		</header>
		<div class="mobannerbox">
			<img src="images/service/mobanner.jpg"/>
		</div>
		<!--公共头部结束-->

		<div class="main">
			<div class="where">
				<div class="text">
					<a href="index.html">首页</a> &nbsp;&nbsp;/&nbsp;&nbsp;服务支持&nbsp;&nbsp;/&nbsp;&nbsp;<a href="servicemap.html">服务网络</a>
				</div>
			</div>
			<div class="content">
				<div class="title-box">
					<p class="j-h3b">
						我们的服务网络
					</p>
					<p class="j-h5c">service network</p>
				</div>
				<div class="mapbox">
					<img src="images/service/map.png" />
					<div class="pt1 pt">
						<img class="yello" src="images/service/ser02.png" />
						<img class="blue" src="images/service/ser03.png" />
						<div class="addressbox">
							<img class="jj" src="images/service/ser05.jpg" alt="" />
							<div class="infobox">
								<img class="posi" src="images/service/ser06.png" alt="" />
								<p class="positext j-h5c">地址</p>
								<p class="infotext j-h5">杭州经济技术开发区6号路 260号中自科技园
								</p>
							</div>
						</div>
					</div>
					<div class="pt2 pt">
						<img class="yello" src="images/service/ser02.png" />
						<img class="blue" src="images/service/ser03.png" />
						<div class="addressbox">
							<img class="jj" src="images/service/ser05.jpg" alt="" />
							<div class="infobox">
								<img class="posi" src="images/service/ser06.png" alt="" />
								<p class="positext j-h5c">地址</p>
								<p class="infotext j-h5">杭州经济技术开发区6号路 260号中自科技园
								</p>
							</div>
						</div>
					</div>
					<div class="pt3 pt">
						<img class="yello" src="images/service/ser02.png" />
						<img class="blue" src="images/service/ser03.png" />
						<div class="addressbox">
							<img class="jj" src="images/service/ser05.jpg" alt="" />
							<div class="infobox">
								<img class="posi" src="images/service/ser06.png" alt="" />
								<p class="positext j-h5c">地址</p>
								<p class="infotext j-h5">杭州经济技术开发区6号路 260号中自科技园
								</p>
							</div>
						</div>
					</div>
					<div class="pt4 pt">
						<img class="yello" src="images/service/ser02.png" />
						<img class="blue" src="images/service/ser03.png" />
						<div class="addressbox">
							<img class="jj" src="images/service/ser05.jpg" alt="" />
							<div class="infobox">
								<img class="posi" src="images/service/ser06.png" alt="" />
								<p class="positext j-h5c">地址</p>
								<p class="infotext j-h5">杭州经济技术开发区6号路 260号中自科技园
								</p>
							</div>
						</div>
					</div>
					<div class="pt5 pt">
						<img class="yello" src="images/service/ser02.png" />
						<img class="blue" src="images/service/ser03.png" />
						<div class="addressbox">
							<img class="jj" src="images/service/ser05.jpg" alt="" />
							<div class="infobox">
								<img class="posi" src="images/service/ser06.png" alt="" />
								<p class="positext j-h5c">地址</p>
								<p class="infotext j-h5">杭州经济技术开发区6号路 260号中自科技园
								</p>
							</div>
						</div>
					</div>
					<div class="pt6 pt">
						<img class="yello" src="images/service/ser02.png" />
						<img class="blue" src="images/service/ser03.png" />
						<div class="addressbox">
							<img class="jj" src="images/service/ser05.jpg" alt="" />
							<div class="infobox">
								<img class="posi" src="images/service/ser06.png" alt="" />
								<p class="positext j-h5c">地址</p>
								<p class="infotext j-h5">杭州经济技术开发区6号路 260号中自科技园
								</p>
							</div>
						</div>
					</div>
					<div class="pt7 pt">
						<img class="yello" src="images/service/ser02.png" />
						<img class="blue" src="images/service/ser03.png" />
						<div class="addressbox">
							<img class="jj" src="images/service/ser05.jpg" alt="" />
							<div class="infobox">
								<img class="posi" src="images/service/ser06.png" alt="" />
								<p class="positext j-h5c">地址</p>
								<p class="infotext j-h5">杭州经济技术开发区6号路 260号中自科技园
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!--公共底部开始-->
		<!--pc底部-->
		<div class="footer">
			<div class="footer-info clearfix">
				<div class="flbox">
					<img class="footerlogo" src="images/index/footer-logo.png" />
				</div>
				<div class="fifbox">
					<ul class="havebox clearfix">
						<li class="have">
							<a href="solution.html">解决方案</a>
						</li>
						<li class="have">
							<a href="product.html">产品中心</a>
						</li>
						<li class="have">
							<a href="servicemap.html">服务支持</a>
						</li>
						<li class="have">
							<a href="news.html">新闻资讯</a>
						</li>
						<li class="have">
							<a href="introduce.html">关于我们</a>
						</li>
						<li class="have">
							<a href="callus.html">联系我们</a>
						</li>
					</ul>
					<div class="iconbox clearfix">
						<img class="ficon" src="images/index/in.png" />
						<img class="ficon" src="images/index/sina.png" />
					</div>
					<div class="ffbox clearfix">
						<span>法律声明</span>
						<span>隐私</span>
					</div>
				</div>
				<img class="erweima" src="images/index/erweima.png" />
			</div>
		</div>
		<!--手机底部-->
		<div class="mofooter clearfix">
			<div class="footerlogobox">
				<img src="images/glogo.png"/>
			</div>
			<ul class="moful clearfix">
				<li class="mofli">
					<a href="solution.html">解决方案</a>
				</li>
				<li class="mofli">
					<a href="product.html">产品中心</a>
				</li>
				<li class="mofli">
					<a href="servicemap.html">服务支持</a>
				</li>
				<li class="mofli">
					<a href="news.html">新闻资讯</a>
				</li>
				<li class="mofli">
					<a href="introduce.html">关于我们</a>
				</li>
				<li class="mofli">
					<a href="callus.html">联系我们</a>
				</li>
			</ul>
		</div>

		<div class="webByBox clearfix">
			<div class="byInfo">
				<p class="lt">浙江中自庆安新能源技术有限公司</p>
				<p class="lt">浙ICP备11012317号</p>
				<p class="rt">网站建设：翰臣科技</p>
			</div>
		</div>
		<!--公共底部结束-->
		<script src="libs/jquery-1.10.2s.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/adaptive-version2.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$(".yello").hover(function() {
					var $parent = $(this).parent().siblings(".pt");
					$parent.find(".yello").css("display", "block");
					$parent.find(".blue").css("display", "none");
					$parent.find(".addressbox").css("display", "none");
					$(this).hide();
					$(this).siblings(".blue").css("display", "block");
					$(this).siblings(".addressbox").show();
			})
		</script>
	</body>

</html>